<template>
  <div style="height: 100%;">
    <el-container style="height: 100%;">
      <el-header style="background-color:darkslategray; ">
        <el-button type="danger" link style="float: right; margin-top: 20px;" v-if="counterStore.loginStatus == true"
          @click="Tuichu">退出登录</el-button>
        <h2></h2>

        <div style="font-size: 20px;;color: white;margin-top: 15px;"> 智慧农业-智慧畜牧养殖管理平台</div>
      </el-header>
      <el-container>
        <el-aside style="width: 15%;height: 100%;background-color:gainsboro;">
          <el-menu active-text-color="#2F4F4F" background-color="gainsboro" class="el-menu-vertical-demo"
            default-active="2" text-color="#2F4F4F">
            <el-sub-menu v-for="(item, index) in toHome.filter((x: any) => x.perantId == 0)" :index="index">
              <template #title>
                <el-icon>
                  <location />
                </el-icon>
                <span @click="toLink(item.url)">{{ item.permissionsName }} </span>
              </template>
              <el-sub-menu v-for="(item2, index2) in toHome.filter((x: any) => x.perantId == item.permissionsId)"
                :index="index + '-' + index2">
                <template #title>
                  <span @click="toLink(item2.url)"><span>{{ item2.permissionsName
                      }} </span></span>
                </template>
                <el-menu-item v-for="(item3, index3) in toHome.filter((x: any) => x.perantId == item2.permissionsId)"
                  @click="toLink(item3.url)" :index="index + '-' + index2 + '-' + index3"><span color="darkslategray">{{
                    item3.permissionsName
                  }} </span>
                </el-menu-item>
              </el-sub-menu>
            </el-sub-menu>
          </el-menu>
        </el-aside>
        <el-main style=" height: 100%;">
          <RouterView />
        </el-main>
      </el-container>

    </el-container>
  </div>
</template>
<script setup lang="ts">
import axios from 'axios';
import { useRoute, useRouter } from 'vue-router';
import { watch, ref, reactive, onMounted, onBeforeUnmount } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import { RouterView } from 'vue-router';
//调用持久化
import { useCounterStore } from '@/stores/counter';
const counterStore = useCounterStore();
counterStore.loginStatus
const dialogVisible = ref(false);
const route = useRoute();
const router = useRouter();
onMounted(() => {
  console.log(counterStore.loginStatus); // 监听登陆状态变化

  LoginRouter()

})
//延迟加载
// const load = () => {
//   if (counterStore.loginTrue == true) {
//     // 设置延时跳转
//     setTimeout(() => {
//       router.push('/');
//     }, 1000); // 1秒后刷新
//   }
//   counterStore.loginTrue = false;
// };

import {
  Document,
  Menu as IconMenu,
  Location,
  Setting,
} from '@element-plus/icons-vue'

//路由
const toHome = ref<any>([])
const LoginRouter = () => {
  console.log(counterStore.employeeId)
  axios.get('http://localhost:5008/api/RBACs/RolerIndex', {
    params: {
      EmployeeId: counterStore.employeeId
    }
  }).then((res) => {
    toHome.value = res.data.item
    console.log(toHome.value)
  })
}



//跳转
const toLink = (index: string) => {
  console.log(index)
  router.push(index)
}

const Tuichu = () => {

  counterStore.loginStatus = false;
  counterStore.employeeName = '';
  counterStore.employeeId = 0;
  router.push('/');
};





</script>

<style scoped></style>